<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿京东显示密码</title>
      <!-- 点击按钮将密码框切换为文本框 并可以查看密码明文 -->

      <style>
          .box{
              position: relative;
              width: 400px;
              border-bottom: 1px solid #ccc;
              margin: 100px auto;

          }
          .box input{
             
              width: 370px;        
              height:30px;
              border: 0;
              outline: none;
          }
          label img{
            position: absolute;
              top: 2px;
              right: 2px;
              width: 24px;
          }
      </style>
</head>
<body>
        <div class="box">
            <label for="">
                <img src="/3.png" alt="" id="eye">
            </label> 
            <input type="password" id="pwd"> 
        </div>

        <script>
            //  获取元素
            var eye = document.getElementById('eye');
            var pwd = document.getElementById('pwd');
            // 注册事件 处理程序

            var flag = 0;
            eye.onclick = function(){
               if(flag == 0){
                //    点击一次之后 flag 一定要有变化
                pwd.type = 'text';
                eye.src = '/4.png';
                flag = 1;  // 赋值操作
               }else{
                   pwd.type = 'password';
                   eye.src = '/3.png';
                   flag = 0;
               }
            }
            
        </script>

</body>
</html>